<template>
    <div class="ad-list-container">
        <el-card class="ad-list-card">
            <template #header>
                <div class="card-header">
                    <h2>企业广告列表</h2>
                    <el-button type="primary" @click="goToUpload">
                        <el-icon>
                            <Plus />
                        </el-icon>新增广告
                    </el-button>
                </div>
            </template>

            <!-- 搜索区域 -->
            <div class="search-area">
                <el-input v-model="searchKeyword" placeholder="搜索广告标题" clearable @clear="handleSearch"
                    class="search-input" @keyup.enter="handleSearch">
                    <template #append>
                        <el-button @click="handleSearch">
                            <el-icon>
                                <Search />
                            </el-icon>
                        </el-button>
                    </template>
                </el-input>

                <el-select v-model="auditStatusFilter" placeholder="审核状态" clearable @change="handleSearch"
                    class="filter-select">
                    <el-option label="待审核" value="pending" />
                    <el-option label="已通过" value="approved" />
                    <el-option label="已拒绝" value="rejected" />
                </el-select>

                <el-select v-model="visibilityFilter" placeholder="可见性" clearable @change="handleSearch"
                    class="filter-select">
                    <el-option label="可见" :value="true" />
                    <el-option label="不可见" :value="false" />
                </el-select>
            </div>

            <!-- 广告列表 -->
            <el-table v-loading="loading" :data="adList" border stripe style="width: 100%" class="ad-table">
                <el-table-column prop="id" label="ID" width="80" />
                <el-table-column prop="title" label="广告标题" min-width="150" show-overflow-tooltip />
                <el-table-column label="广告内容" min-width="200" show-overflow-tooltip>
                    <template #default="scope">
                        <div class="content-preview">{{ scope.row.content }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="宣传图片" width="120">
                    <template #default="scope">
                        <div v-if="scope.row.imageUrls && scope.row.imageUrls.length > 0"
                            class="image-preview-container">
                            <el-image :src="scope.row.imageUrls[0]" fit="cover" class="image-preview"
                                :preview-src-list="scope.row.imageUrls" preview-teleported>
                                <template #error>
                                    <div class="image-error">
                                        <el-icon>
                                            <Picture />
                                        </el-icon>
                                    </div>
                                </template>
                            </el-image>
                            <div class="image-count" v-if="scope.row.imageUrls.length > 1">
                                +{{ scope.row.imageUrls.length - 1 }}
                            </div>
                        </div>
                        <el-tag v-else type="info" size="small">无图片</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="PDF文件" width="100">
                    <template #default="scope">
                        <el-link v-if="scope.row.fileUrl" :href="scope.row.fileUrl" target="_blank" type="primary"
                            :underline="false" class="pdf-link">
                            <el-icon>
                                <Document />
                            </el-icon>
                            查看PDF
                        </el-link>
                        <el-tag v-else type="info" size="small">无PDF</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="时间范围" width="180">
                    <template #default="scope">
                        <div class="date-range">
                            <div v-if="scope.row.startDate">
                                {{ formatDate(scope.row.startDate) }}
                            </div>
                            <div v-else>-</div>
                            <div class="date-separator">至</div>
                            <div v-if="scope.row.endDate">
                                {{ formatDate(scope.row.endDate) }}
                            </div>
                            <div v-else>-</div>
                        </div>
                    </template>
                </el-table-column>
                <!-- 竞价列已移除 -->
                <el-table-column label="状态" width="100">
                    <template #default="scope">
                        <div class="status-tags">
                            <el-tag :type="getAuditStatusType(scope.row.auditStatus)" effect="plain" size="small">
                                {{ getAuditStatusText(scope.row.auditStatus) }}
                            </el-tag>
                            <el-tag :type="scope.row.isVisible ? 'success' : 'info'" effect="plain" size="small"
                                class="visibility-tag">
                                {{ scope.row.isVisible ? '可见' : '不可见' }}
                            </el-tag>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="创建时间" width="180">
                    <template #default="scope">
                        {{ formatDateTime(scope.row.createdAt) }}
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="200" fixed="right">
                    <template #default="scope">
                        <div class="action-buttons">
                            <el-button type="primary" size="small" @click="handleView(scope.row)" text>
                                <el-icon>
                                    <View />
                                </el-icon>查看
                            </el-button>
                            <el-button type="primary" size="small" @click="handleEdit(scope.row)" text
                                :disabled="scope.row.auditStatus === 'approved'">
                                <el-icon>
                                    <Edit />
                                </el-icon>编辑
                            </el-button>
                            <el-popconfirm title="确定要删除这条广告吗？" @confirm="handleDelete(scope.row.id)"
                                confirm-button-text="确定" cancel-button-text="取消">
                                <template #reference>
                                    <el-button type="danger" size="small" text>
                                        <el-icon>
                                            <Delete />
                                        </el-icon>删除
                                    </el-button>
                                </template>
                            </el-popconfirm>
                        </div>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <div class="pagination-container">
                <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                    :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper" :total="total"
                    @size-change="handleSizeChange" @current-change="handleCurrentChange" background />
            </div>
        </el-card>

        <!-- 广告详情对话框 -->
        <el-dialog v-model="dialogVisible" title="广告详情" width="70%" destroy-on-close>
            <div v-if="currentAd" class="ad-detail">
                <div class="detail-header">
                    <h3>{{ currentAd.title }}</h3>
                    <div class="detail-status">
                        <el-tag :type="getAuditStatusType(currentAd.auditStatus)" effect="dark">
                            {{ getAuditStatusText(currentAd.auditStatus) }}
                        </el-tag>
                        <el-tag :type="currentAd.isVisible ? 'success' : 'info'" effect="dark" class="visibility-tag">
                            {{ currentAd.isVisible ? '可见' : '不可见' }}
                        </el-tag>
                    </div>
                </div>

                <el-divider />

                <div class="detail-content">
                    <div class="detail-item">
                        <div class="detail-label">广告内容：</div>
                        <div class="detail-value">{{ currentAd.content }}</div>
                    </div>

                    <div class="detail-item">
                        <div class="detail-label">链接地址：</div>
                        <div class="detail-value">
                            <el-link v-if="currentAd.linkUrl" :href="currentAd.linkUrl" target="_blank" type="primary">
                                {{ currentAd.linkUrl }}
                            </el-link>
                            <span v-else>-</span>
                        </div>
                    </div>

                    <div class="detail-item">
                        <div class="detail-label">时间范围：</div>
                        <div class="detail-value">
                            {{ currentAd.startDate ? formatDate(currentAd.startDate) : '-' }}
                            至
                            {{ currentAd.endDate ? formatDate(currentAd.endDate) : '-' }}
                        </div>
                    </div>

                    <!-- 广告详情对话框中的竞价信息 -->
                    <div class="detail-item">
                        <div class="detail-label">竞价信息：</div>
                        <div class="detail-value">
                            <template v-if="currentAd.enableBid === 1 || currentAd.enableBid === true">
                                已启用，竞价金额：¥{{ currentAd.bidPrice }}
                            </template>
                            <template v-else>未启用</template>
                        </div>
                    </div>

                    <div class="detail-item">
                        <div class="detail-label">创建时间：</div>
                        <div class="detail-value">{{ formatDateTime(currentAd.createdAt) }}</div>
                    </div>

                    <div class="detail-item">
                        <div class="detail-label">更新时间：</div>
                        <div class="detail-value">{{ formatDateTime(currentAd.updatedAt) }}</div>
                    </div>

                    <div v-if="currentAd.auditRemark" class="detail-item">
                        <div class="detail-label">审核备注：</div>
                        <div class="detail-value">{{ currentAd.auditRemark }}</div>
                    </div>
                </div>

                <el-divider />

                <div class="detail-images" v-if="currentAd.imageUrls && currentAd.imageUrls.length > 0">
                    <div class="detail-label">宣传图片：</div>
                    <div class="image-gallery">
                        <el-image v-for="(url, index) in currentAd.imageUrls" :key="index" :src="url" fit="cover"
                            class="gallery-image" :preview-src-list="currentAd.imageUrls" preview-teleported />
                    </div>
                </div>

                <div class="detail-pdf" v-if="currentAd.fileUrl">
                    <div class="detail-label">PDF文件：</div>
                    <el-link :href="currentAd.fileUrl" target="_blank" type="primary" class="pdf-download">
                        <el-icon>
                            <Document />
                        </el-icon>
                        查看/下载PDF文件
                    </el-link>
                </div>
            </div>

            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">关闭</el-button>
                    <el-button type="primary" @click="handleEdit(currentAd)"
                        :disabled="currentAd && currentAd.auditStatus === 'approved'">
                        编辑广告
                    </el-button>
                </span>
            </template>
        </el-dialog>

        <!-- 编辑广告对话框 -->
        <el-dialog v-model="editDialogVisible" title="编辑广告" width="70%" destroy-on-close>
            <div v-if="editingAd" class="ad-edit-form">
                <el-form :model="editForm" :rules="rules" ref="editFormRef" label-position="top" class="edit-form">
                    <!-- 基本信息 -->
                    <h3 class="form-section-title">基本信息</h3>
                    <el-form-item label="广告标题" prop="title">
                        <el-input v-model="editForm.title" placeholder="请输入广告标题" />
                    </el-form-item>

                    <el-form-item label="广告内容" prop="content">
                        <el-input v-model="editForm.content" type="textarea" :rows="4" placeholder="请输入广告内容描述" />
                    </el-form-item>

                    <el-form-item label="链接地址" prop="linkUrl">
                        <el-input v-model="editForm.linkUrl" placeholder="请输入广告链接地址（可选）" />
                    </el-form-item>

                    <!-- 时间设置 -->
                    <h3 class="form-section-title">时间设置</h3>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="开始日期" prop="startDate">
                                <el-date-picker v-model="editForm.startDate" type="datetime" placeholder="选择开始日期时间（可选）"
                                    style="width: 100%" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="结束日期" prop="endDate">
                                <el-date-picker v-model="editForm.endDate" type="datetime" placeholder="选择结束日期时间（可选）"
                                    style="width: 100%" />
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <!-- 竞价设置 -->
                    <h3 class="form-section-title">竞价设置</h3>
                    <el-form-item label="竞价状态" prop="enableBid">
                        <el-select v-model="editForm.enableBid" placeholder="请选择竞价状态" style="width: 100%">
                            <el-option label="启用竞价" :value="1" />
                            <el-option label="不启用竞价" :value="0" />
                        </el-select>
                    </el-form-item>

                    <el-form-item v-if="editForm.enableBid === 1" label="竞价金额" prop="bidPrice">
                        <el-input-number v-model="editForm.bidPrice" :min="0" :precision="2" :step="10"
                            style="width: 100%" placeholder="请输入竞价金额" />
                    </el-form-item>

                    <!-- 可见性设置 -->
                    <h3 class="form-section-title">可见性设置</h3>
                    <el-form-item label="是否可见" prop="isVisible">
                        <el-switch v-model="editForm.isVisible" 
                            active-text="可见" 
                            inactive-text="不可见"
                            :active-value="true"
                            :inactive-value="false" />
                    </el-form-item>

                    <!-- 图片预览 -->
                    <h3 class="form-section-title">当前图片</h3>
                    <div class="current-images" v-if="editingAd.imageUrls && editingAd.imageUrls.length > 0">
                        <div class="image-gallery">
                            <div v-for="(url, index) in editingAd.imageUrls" :key="index" class="image-item">
                                <el-image :src="url" fit="cover" class="gallery-image"
                                    :preview-src-list="editingAd.imageUrls" preview-teleported />
                            </div>
                        </div>
                        <div class="image-note">注意：图片修改需要重新上传广告</div>
                    </div>
                    <div v-else class="no-images">
                        <el-empty description="暂无图片" />
                    </div>

                    <!-- PDF预览 -->
                    <h3 class="form-section-title">当前PDF</h3>
                    <div v-if="editingAd.fileUrl" class="current-pdf">
                        <el-link :href="editingAd.fileUrl" target="_blank" type="primary" class="pdf-link">
                            <el-icon>
                                <Document />
                            </el-icon>
                            查看当前PDF文件
                        </el-link>
                        <div class="pdf-note">注意：PDF修改需要重新上传广告</div>
                    </div>
                    <div v-else class="no-pdf">
                        <el-empty description="暂无PDF文件" />
                    </div>
                </el-form>

                <div class="form-actions">
                    <el-button @click="cancelEdit">取消</el-button>
                    <el-button type="primary" :loading="submitting" @click="submitEdit">保存修改</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import axios from 'axios'
import {
    Plus, Search, View, Edit, Delete, Document, Picture
} from '@element-plus/icons-vue'
import { useUserStore } from '../../../store/user'

const router = useRouter()
const userStore = useUserStore()

// 创建axios实例
const api = axios.create({
    baseURL: 'http://localhost:3000',
    timeout: 10000
})

// 数据状态
const loading = ref(false)
const adList = ref([])
const total = ref(0)
const currentPage = ref(1)
const pageSize = ref(10)
const searchKeyword = ref('')
const auditStatusFilter = ref('')
const visibilityFilter = ref('')
const dialogVisible = ref(false)
const currentAd = ref(null)
const editDialogVisible = ref(false)
const editingAd = ref(null)
const submitting = ref(false)

// 编辑表单
const editForm = reactive({
    title: '',
    content: '',
    linkUrl: '',
    startDate: null,
    endDate: null,
    bidPrice: 0,
    enableBid: 0,  // 0表示不启用，1表示启用
    isVisible: false // 新增是否可见字段
})

const editFormRef = ref(null)

// 表单验证规则
const rules = {
    title: [
        { required: true, message: '请输入广告标题', trigger: 'blur' },
        { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
    ],
    content: [
        { required: true, message: '请输入广告内容', trigger: 'blur' },
        { min: 10, max: 500, message: '长度在 10 到 500 个字符', trigger: 'blur' }
    ],
    linkUrl: [
        {
            pattern: /^(https?:\/\/)?([\da-z.-]+)\.([a-z.]{2,6})([/\w.-]*)*\/?$/,
            message: '请输入有效的URL地址',
            trigger: 'blur'
        }
    ],
    startDate: [
        {
            validator: (rule, value, callback) => {
                if (editForm.endDate && value && value > editForm.endDate) {
                    callback(new Error('开始日期不能晚于结束日期'))
                } else {
                    callback()
                }
            },
            trigger: 'change'
        }
    ],
    endDate: [
        {
            validator: (rule, value, callback) => {
                if (editForm.startDate && value && value < editForm.startDate) {
                    callback(new Error('结束日期不能早于开始日期'))
                } else {
                    callback()
                }
            },
            trigger: 'change'
        }
    ],
    bidPrice: [
        {
            required: true,
            message: '请输入竞价金额',
            trigger: 'blur',
            type: 'number'
        }
    ]
}

// 获取广告列表
const fetchAdList = async () => {
    if (!userStore.token) {
        ElMessage.error('您尚未登录或登录已过期，请重新登录')
        router.push('/login')
        return
    }

    loading.value = true
    try {
        const params = {
            page: currentPage.value,
            pageSize: pageSize.value
        }

        // 添加搜索关键词
        if (searchKeyword.value) {
            params.keyword = searchKeyword.value
        }

        if (auditStatusFilter.value) {
            params.auditStatus = auditStatusFilter.value
        }

        if (visibilityFilter.value !== '') {
            params.isVisible = visibilityFilter.value
        }

        // 直接使用axios实例，并在请求头中添加token
        const response = await api.get('/api/company-ad', {
            params,
            headers: {
                'Authorization': `Bearer ${userStore.token}`
            }
        })

        adList.value = response.data.data
        console.log(adList.value)
        total.value = response.data.total
    } catch (error) {
        console.error('获取广告列表失败:', error)
        if (error.response && error.response.status === 401) {
            ElMessage.error('登录已过期，请重新登录')
            userStore.clearToken && userStore.clearToken()
            router.push('/login')
        } else {
            ElMessage.error(error.response?.data?.message || '获取广告列表失败，请稍后重试')
        }
    } finally {
        loading.value = false
    }
}

// 处理页码变化
const handleCurrentChange = (page) => {
    currentPage.value = page
    fetchAdList()
}

// 处理每页条数变化
const handleSizeChange = (size) => {
    pageSize.value = size
    currentPage.value = 1
    fetchAdList()
}

// 处理搜索
const handleSearch = () => {
    currentPage.value = 1
    fetchAdList()
}

// 跳转到上传页面
const goToUpload = () => {
    router.push('/home/company/ad/upload')
}

// 查看广告详情
const handleView = (ad) => {
    currentAd.value = ad
    dialogVisible.value = true
}

// 编辑广告
const handleEdit = (ad) => {
    if (ad.auditStatus === 'approved') {
        ElMessage.warning('已审核通过的广告不能编辑')
        return
    }

    // 设置编辑表单数据
    editingAd.value = ad
    editForm.title = ad.title
    editForm.content = ad.content
    editForm.linkUrl = ad.linkUrl || ''
    editForm.startDate = ad.startDate ? new Date(ad.startDate) : null
    editForm.endDate = ad.endDate ? new Date(ad.endDate) : null
    editForm.enableBid = ad.enableBid ? 1 : 0  // 直接使用数字类型
    editForm.bidPrice = parseFloat(ad.bidPrice) || 0
    editForm.isVisible = ad.isVisible // 设置是否可见状态

    // 显示编辑对话框
    editDialogVisible.value = true

    // 在下一个 tick 重置表单验证状态
    nextTick(() => {
        editFormRef.value?.clearValidate()
    })
}

// 取消编辑
const cancelEdit = () => {
    editDialogVisible.value = false
    editingAd.value = null
}

// 提交编辑
const submitEdit = async () => {
    if (!userStore.token) {
        ElMessage.error('您尚未登录或登录已过期，请重新登录')
        router.push('/login')
        return
    }

    editFormRef.value.validate(async (valid) => {
        if (!valid) {
            ElMessage.error('请正确填写表单内容')
            return
        }

        // 检查ID是否存在
        if (!editingAd.value || !editingAd.value.id) {
            ElMessage.error('广告ID不存在，无法更新')
            return
        }

        submitting.value = true
        try {
            // 准备更新数据
            const updateData = {
                title: editForm.title,
                content: editForm.content,
                linkUrl: editForm.linkUrl || null,
                startDate: editForm.startDate ? editForm.startDate.toISOString() : null,
                endDate: editForm.endDate ? editForm.endDate.toISOString() : null,
                enableBid: Number(editForm.enableBid),  // 确保是数字类型
                bidPrice: editForm.enableBid === 1 ? editForm.bidPrice : 0,
                isVisible: editForm.isVisible // 添加是否可见字段
            }

            // 确保ID作为参数传递，同时也放在请求体中
            const adId = editingAd.value.id
            updateData.id = adId // 在请求体中也包含ID
            
            console.log('正在更新广告，ID:', adId, '数据:', updateData)

            // 发送PATCH请求，并在请求头中添加token
            await api.patch(`/api/company-ad/${adId}`, updateData, {
                headers: {
                    'Authorization': `Bearer ${userStore.token}`
                }
            })

            ElMessage.success('广告更新成功')
            editDialogVisible.value = false
            fetchAdList() // 刷新列表
        } catch (error) {
            console.error('更新广告失败:', error)
            if (error.response && error.response.status === 401) {
                ElMessage.error('登录已过期，请重新登录')
                userStore.clearToken && userStore.clearToken()
                router.push('/login')
            } else {
                ElMessage.error(error.response?.data?.message || '更新广告失败，请稍后重试')
            }
        } finally {
            submitting.value = false
        }
    })
}

// 删除广告
const handleDelete = async (id) => {
    if (!userStore.token) {
        ElMessage.error('您尚未登录或登录已过期，请重新登录')
        router.push('/login')
        return
    }

    if (!id) {
        ElMessage.error('广告ID不存在，无法删除')
        return
    }

    try {
        console.log('正在删除广告，ID:', id)
        
        // 使用DELETE方法删除广告，并在请求头中添加token
        await api.delete(`/api/company-ad/${id}`, {
            headers: {
                'Authorization': `Bearer ${userStore.token}`
            }
        })

        ElMessage.success('广告删除成功')
        fetchAdList() // 刷新列表
    } catch (error) {
        console.error('删除广告失败:', error)
        if (error.response && error.response.status === 401) {
            ElMessage.error('登录已过期，请重新登录')
            userStore.clearToken && userStore.clearToken()
            router.push('/login')
        } else {
            ElMessage.error(error.response?.data?.message || '删除广告失败，请稍后重试')
        }
    }
}

// 格式化日期
const formatDate = (dateString) => {
    if (!dateString) return '-'
    const date = new Date(dateString)
    return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
}

// 格式化日期时间
const formatDateTime = (dateString) => {
    if (!dateString) return '-'
    const date = new Date(dateString)
    return `${formatDate(dateString)} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
}

// 获取审核状态类型
const getAuditStatusType = (status) => {
    switch (status) {
        case 'approved': return 'success'
        case 'rejected': return 'danger'
        case 'pending': return 'warning'
        default: return 'info'
    }
}

// 获取审核状态文本
const getAuditStatusText = (status) => {
    switch (status) {
        case 'approved': return '已通过'
        case 'rejected': return '已拒绝'
        case 'pending': return '待审核'
        default: return '未知'
    }
}

// 初始化
onMounted(() => {
    fetchAdList()
})
</script>

<style scoped>
.ad-list-container {
  padding: 20px;
}

.ad-list-card {
  margin-bottom: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h2 {
  margin: 0;
  font-size: 1.5rem;
  color: #303133;
}

.search-area {
  display: flex;
  margin-bottom: 20px;
  gap: 15px;
  flex-wrap: wrap;
}

.search-input {
  width: 300px;
}

.filter-select {
  width: 150px;
}

.ad-table {
  margin-bottom: 20px;
}

.content-preview {
  max-height: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.image-preview-container {
  position: relative;
  width: 80px;
  height: 80px;
}

.image-preview {
  width: 100%;
  height: 100%;
  border-radius: 4px;
  object-fit: cover;
}

.image-error {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f7fa;
  color: #909399;
  border-radius: 4px;
}

.image-count {
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 2px 6px;
  border-radius: 0 0 4px 0;
  font-size: 12px;
}

.pdf-link {
  display: flex;
  align-items: center;
  gap: 5px;
}

.date-range {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.date-separator {
  color: #909399;
  font-size: 12px;
  text-align: center;
}

.status-tags {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.visibility-tag {
  margin-top: 5px;
}

.action-buttons {
  display: flex;
  gap: 5px;
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

/* 广告详情样式 */
.ad-detail {
  padding: 0 20px;
}

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.detail-header h3 {
  margin: 0;
  font-size: 1.3rem;
  color: #303133;
}

.detail-status {
  display: flex;
  gap: 10px;
}

.detail-content {
  margin-bottom: 20px;
}

.detail-item {
  margin-bottom: 15px;
  display: flex;
}

.detail-label {
  font-weight: bold;
  width: 100px;
  flex-shrink: 0;
  color: #606266;
}

.detail-value {
  flex: 1;
  word-break: break-all;
}

.detail-images {
  margin-top: 20px;
  margin-bottom: 20px;
}

.image-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.gallery-image {
  width: 150px;
  height: 150px;
  border-radius: 4px;
  object-fit: cover;
  border: 1px solid #ebeef5;
}

.image-item {
  position: relative;
}

.detail-pdf {
  margin-top: 20px;
  margin-bottom: 20px;
}

.pdf-download {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
}

/* 编辑表单样式 */
.ad-edit-form {
  padding: 0 20px;
}

.edit-form {
  margin-bottom: 20px;
}

.form-section-title {
  margin-top: 25px;
  margin-bottom: 15px;
  font-size: 1.1rem;
  color: #409eff;
  border-bottom: 1px solid #ebeef5;
  padding-bottom: 10px;
}

.current-images {
  margin-top: 10px;
}

.image-note, .pdf-note {
  margin-top: 10px;
  color: #909399;
  font-size: 12px;
}

.no-images, .no-pdf {
  margin-top: 10px;
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 30px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style>